<template>
  <border-box4>
    <span>
      更新时间: <span ml-20>{{ data?.updatedTime }}</span>
    </span>
    <span>
      电池编号: <span ml-20>{{ data?.batteryLockId }}</span>
    </span>
    <div w-full flex items-center>
      <span> 电池状态:</span>
      <div class="color-[#FFF] p-y-5 p-x-5 text-[14px] bg-[#8adedeb2] rounded-10">
        <span> {{ formatBatteryStatus(data?.batteryStatus) }}</span>
      </div>
    </div>
    <div grid grid-cols-2 grid-rows-1 gap-x-20 content-center>
      <div>
        <span
          >当前电流 <span ml-20>{{ data?.electricCurrent }}V</span></span
        >
      </div>
      <div>
        <span
          >当前电压 <span ml-20>{{ data?.voltage }}V</span></span
        >
      </div>
    </div>
    <div grid grid-cols-2 grid-rows-1 gap-x-20 content-center w-full>
      <div flex items-center>
        <span>功率管温度告警</span>
        <div class="color-[#FFF] p-y-5 p-x-5 text-[14px] bg-[#43ffffcc] rounded-6">
          <span> {{ formatBatteryAlarm(data?.mosTemperatureStatus) }}</span>
        </div>
      </div>
      <div flex items-center>
        充电过流告警
        <div class="color-[#FFF] p-y-5 p-x-5 text-[14px] bg-[#43ffffcc] rounded-6">
          <span> {{ formatBatteryAlarm(data?.chargeOverCurrentStatus) }}</span>
        </div>
      </div>
    </div>
  </border-box4>
</template>

<script setup lang="ts">
import { batteryDataDTOEntity } from '@/api/home/types/home'
import BorderBox4 from '@/components/basic/BorderBox4.vue'
defineProps<{
  data: batteryDataDTOEntity
}>()
// 格式化函数
const formatBatteryStatus = (status: string | undefined) => {
  return status === '5'
    ? '搁置'
    : status === '3'
      ? '震动'
      : status === '4'
        ? '静止'
        : status === '6'
          ? '移动'
          : ''
}
const formatBatteryAlarm = (status: string | undefined) => {
  return status === '0' ? '正常' : '告警'
}
</script>
